<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div class="hobby">
			<input type="checkbox" name=""  value="1" />唱
			<input type="checkbox" name=""  value="2" />跳
			<input type="checkbox" name=""  value="3" />rap
			<input type="checkbox" name=""  value="4" />篮球
		</div>
		<button type="button" onclick="btn()">输出</button>
		<div class="d1">
			
		</div>
	</body>
	<script type="text/javascript">
		var hobbys = document.querySelectorAll(".hobby>input[type='checkbox']");
		var d1=document.querySelector(".d1")
		if (localStorage.aa) {
			var arr = JSON.parse(localStorage.aa)
			show(arr)
		} else{
			var arr = [];
			localStorage.aa = JSON.stringify(arr)
		}
		
		function btn(){
			var arr1 = [];
			for(var i=0;i<hobbys.length;i++){
				if(hobbys[i].checked){
					arr1.push(hobbys[i].value);
				}
			}
			console.log("arr1",arr1)
			var obj={
				hobby:arr
			}
			arr.push(obj);
			localStorage.aa = JSON.stringify(arr);
			
			show(arr);
		}
		
		
		function show(arr){
			d1.innerHTML = "";
			for(var i=0;i<arr.length;i++){
				d1.innerHTML+=`
					<div>${hobbyFn(arr[i].hobby)}</div>
				`;
			}
		}
		
		/*
			var arr = ["1","2","3"];
			唱 跳 rap 篮球
		*/
		function hobbyFn(arr){
			var arr1 = ["唱","跳","rap","篮球"];
			var arr2 = [];	// 数组接收对应结果
			for(var i=0;i<arr.length;i++){
				arr2.push(arr1[arr[i]-1]);
			}
			
			return arr2.join(" ");	// 数组转字符串
		}
	</script>
</html>
